<!DOCTYPE html>
<html>
<head>
	
	<title><?php echo _MANAGER_TITLE_; ?></title>

	<?php $this->setFlag('edit'); ?>
	<?php $this->import('meta'); ?>

</head>
<body style="background-color: #ececec;">

	<div id="mainBg" class="bg">

		<div class="title-bar2">
			<div class="title-text">测试图片上传</div>
		</div>

		<div class="rect">
			<div class="title">
				<div class="order">2</div>
				<div class="text">商家图片</div>
				<div id="selectImg2" class="button2">选择图片</div><span class="img-size2">图片不大于2M（最多可上传6张）</span><span class="upload-pic-cover-text" onclick="showCoverBar()">自定义封面图</span>
			</div>
			<div class="upload-pic-bar">
				<div class="upload-pic-cover" id="uploadCover" style="display: none;">
					<div id="coverPicDiv" class="upload-pic-cover-img" style="background-image: url('static/pic/pc/logo_default.jpg')" onmouseover="showCoverBtn('')" onmouseout="showCoverBtn('none')">
						<div id="selectCoverImg" class="upload-pic-cover-edit" style="display: none;">选图</div>
						<div id="deleteCoverImg" class="upload-pic-cover-delete" style="display: none;" onclick="deleteCover()">删除</div>
					</div>
				</div>
				<div class="upload-pic-album" id="uploadImgBox"></div>
			</div>
		</div>

		<div class="button1" onclick="save()">保存</div>

	</div>

	<input type="text" id="coverPicId" class="display-none" />

	<script type="text/javascript">
		var coverFile = '';
		var fileList = {};
		var fileNum = 0;
	    layui.use('upload', function() {
	        var upload = layui.upload;
	        var uploadCover = upload.render({
	            elem: '#selectCoverImg', 
	            accept: 'images', 
	            acceptMime: 'image/*', 
	            auto: false, 
	            size: 500, 
	            choose: function(obj) {
	                obj.preview(function(index, file, result) {
	                    getItem('coverPicDiv').style.backgroundImage = 'url("' + result + '")';
	                    coverFile = result;

	                    var elements = document.querySelectorAll('.upload-cover-btn-selected');
						if (elements != null && elements.length > 0) {
							for (var i = 0; i < elements.length; i++) {
								elements[i].className = 'upload-cover-btn';
							}
						}
	                    setValue('coverPicId', '');
	                });
	            }, 
	        });

	        var uploadInst2 = upload.render({
				elem: '#selectImg2', 
				accept: 'images', 
				acceptMime: 'image/*', 
				auto: false, 
			  	size: 2048, 
			  	choose: function(obj) {
			  		obj.preview(function(index, file, result) {
			  			var newPic = '';
			  			var uuid = getUUID();
			  			var picCount = document.querySelectorAll('.upload-img').length;
			  			fileList[uuid] = encodeURIComponent(result);

			  			newPic += '<div class="upload-img" style="background-image: url(\'' + result + '\');" draggable="true" ondragstart="startDragPic(this)" ondrop="stopDragPic(this)" ondragover="event.preventDefault();" ly-id="' + picCount + '">';
			  			newPic += '<img src="static/pic/pc/delete.png" class="button4" onclick="deletePic(this, \'' + uuid + '\')" />';
			  			newPic += '<div class="upload-cover-btn" onclick="setCoverPic(this, \'' + uuid + '\')">封面</div>';
			  			newPic += '</div>';
			  			setHtml('uploadImgBox', getHtml('uploadImgBox') + newPic);

			  			fileNum++;
			  			if (fileNum >= 6) {
			  				setDisplay('selectImg2', 'none');
			  			}
			  		});
			  	}
			});
	    });

	    function deletePic(obj, index) {
			delete fileList[index];
			obj.parentNode.parentNode.removeChild(obj.parentNode);

			fileNum--;
			if (fileNum < 6) {
  				setDisplay('selectImg2', '');
  			}

  			if (index == getValue('coverPicId')) {
  				setValue('coverPicId', '');
  				getItem('coverPicDiv').style.backgroundImage = 'url("static/pic/pc/logo_default.jpg")';
                coverFile = '';
  			}
		}

		function setCoverPic(obj, uuid) {
			if (obj.className == 'upload-cover-btn-selected') {
				obj.className = 'upload-cover-btn';
				setValue('coverPicId', '');

				getItem('coverPicDiv').style.backgroundImage = 'url("static/pic/pc/logo_default.jpg")';
                coverFile = '';
			}
			else {
				var elements = document.querySelectorAll('.upload-cover-btn-selected');
				if (elements != null && elements.length > 0) {
					for (var i = 0; i < elements.length; i++) {
						elements[i].className = 'upload-cover-btn';
					}
				}

				obj.className = 'upload-cover-btn-selected';
				setValue('coverPicId', uuid);

				var image = obj.parentNode.style.backgroundImage;
				getItem('coverPicDiv').style.backgroundImage = image;
                coverFile = image;
			}
		}

		function showCoverBar() {
			var obj = getItem('uploadCover');
			if (obj.style.display == '') {
				setDisplay('uploadCover', 'none');
			}
			else {
				setDisplay('uploadCover', '');
			}
		}

		function showCoverBtn(status) {
			setDisplay('selectCoverImg', status);
			setDisplay('deleteCoverImg', status);
		}

		function deleteCover() {
			var elements = document.querySelectorAll('.upload-cover-btn-selected');
			if (elements != null && elements.length > 0) {
				for (var i = 0; i < elements.length; i++) {
					elements[i].className = 'upload-cover-btn';
				}
			}

			setValue('coverPicId', '');
			getItem('coverPicDiv').style.backgroundImage = 'url("static/pic/pc/logo_default.jpg")';
	        coverFile = '';
		}

		var dragFromPicId = '';
		var dragToPicId = '';
		function startDragPic(obj) {
			dragFromPicId = parseInt(obj.getAttribute('ly-id'));
		}

		function stopDragPic(obj) {
			dragToPicId = parseInt(obj.getAttribute('ly-id'));

			var picCount = document.querySelectorAll('.upload-img').length;
			var parent = obj.parentNode;
			if (dragFromPicId == dragToPicId) {
				return;
			}
			else if (dragToPicId == picCount - 1) {
				parent.appendChild(parent.children[dragFromPicId]);
			}
			else {
				if (dragFromPicId > dragToPicId) {
					parent.insertBefore(parent.children[dragFromPicId], parent.children[dragToPicId]);
				}
				else {
					parent.insertBefore(parent.children[dragFromPicId], parent.children[dragToPicId + 1]);
				}
			}

			//重新给图片的ly-id按顺序赋值
			for (var i = 0; i < picCount; i++) {
				parent.children[i].setAttribute('ly-id', i);
			}

			//重新调整图片数组的元素位置
			adjustPicArray(dragFromPicId, dragToPicId);
		}

		function adjustPicArray(fromPicId, toPicId) {
			var index = 0;
			var fromPicKey = '';
			var fromPicValue = '';
			var newList = {};

			//先取出from元素的key与value
		    for (var key in fileList) {
		    	if (index == fromPicId) {
		    		fromPicKey = key;
		    		fromPicValue = fileList[key];
		    		break;
		    	}
		    	else {
		    		++index;
		    	}
		    }

		    //再取出to元素及其后的key与value（from元素除外）
		    index = 0;
		    for (var key in fileList) {
		    	if (fromPicId > toPicId) {
		    		if (index == fromPicId) {
			    	}
			    	else if (index >= toPicId) {
			    		newList[key] = fileList[key];
			    	}
		    	}
		    	else {
		    		if (index == fromPicId) {
			    	}
			    	else if (index > toPicId) {
			    		newList[key] = fileList[key];
			    	}
		    	}
		    	
		    	++index;
		    }

		    //删除from元素、to元素及其后的key与value
		    delete fileList[fromPicKey];
		    for (var key in newList) {
		    	delete fileList[key];
		    }

		    //原数组中先添加from元素，再添加to元素及其后的key与value
		    fileList[fromPicKey] = fromPicValue;
		    for (var key in newList) {
		    	fileList[key] = newList[key];
		    }
		}

		function save() {
			var json = [];
		    json.push(fileList);

		    var param = {};
		    param.ctrl = 'test';
		    param.func = 'save';
		    param.flag = 'add';
		    param.bigpic = JSON.stringify(json);
		    param.coverid = getAjaxValue('coverPicId');
		    param.coverpic = encodeURIComponent(coverFile);
		    
		    sendAjax(param, function(result) {
		        showTip('提交成功');
		    });
		}
	</script>

	<style>
		.upload-pic-bar
		{
			margin: 0px 20px 0px 20px;
			display: -webkit-flex;
		    -webkit-flex-direction: row;
		    -webkit-align-items: stretch;
		}

		.upload-pic-cover
		{
			-webkit-flex: none;
			width: 132px;
		}

		.upload-pic-album
		{
			-webkit-flex: auto;
			font-size: 0px;
		}

		.upload-pic-cover-img
		{
			width: 112px;
			height: 80px;
			background-size: cover;
			background-position: center;
		}

		.upload-pic-cover-edit
		{
			width: 56px;
			height: 20px;
			line-height: 20px;
			color: #333333;
		    font-size: 12px;
		    text-align: center;
		    background-color: #F2F2F2;
		    margin-top: 60px;
		    float: left;
		    cursor: pointer;
		}

		.upload-pic-cover-delete
		{
			width: 56px;
			height: 20px;
			line-height: 20px;
			color: white;
		    font-size: 12px;
		    text-align: center;
		    background-color: #FF0000;
		    margin-top: 60px;
		    float: left;
		    cursor: pointer;
		}
		
		.upload-cover-btn, .upload-cover-btn-selected
		{
			width: 40px;
		    height: 20px;
		    line-height: 20px;
		    color: #333333;
		    font-size: 12px;
		    text-align: center;
		    background-color: #F2F2F2;
		    margin-top: 60px;
		    float: left;
		    cursor: pointer;
		}

		.upload-cover-btn-selected
		{
			color: white;
			background-color: #21A0F7;
		}

		.upload-pic-cover-text
		{
			color: #337ab7;
			font-size: 14px;
			height: 60px;
			line-height: 60px;
			margin-left: 60px;
			cursor: pointer;
		}
	</style>

</body>
</html>